<template>
  <view>
    <!--标题栏-->
    <bar-title bgColor='bg-white' :isBack="false">
      <block slot="content">商品详情</block>
      <block slot="right">
        <text class="cuIcon-forward"/>
        <text class="cuIcon-more"/>
      </block>
    </bar-title>

    <!--轮播图-->
    <view class="banner-swiper-box">
      <swiper class="screen-swiper" circular autoplay @change="bannerSwiper">
        <swiper-item v-for="(item,index) in detail.swiperList" :key="index">
          <image :src="imgUrl + item" mode="aspectFill"/>
        </swiper-item>
      </swiper>
      <!--页码-->
      <text class="cu-tag bg-grey round sm page">{{bannerCur + 1}} / {{detail.swiperList.length}}</text>
    </view>
    <view class="limited-seckill-box">
      <text class="text-price text-xxl">{{comPrice}}</text>
      <view class="text-xxl cost-price-num ">
        <view>/天</view>
      </view>
      <view class="text-right time-right">
        <view>销量</view>
        <view class="text-xs">{{detail.count}}</view>
      </view>
    </view>
    <!--标题-->
    <view class="bg-white view-box title-view-box">
      <view class="title-view">
        <text class="cu-tag bg-red radius sm">{{detail.is_new | filterold }}</text>
        <text class="text-black text-lg text-bold">{{detail.name}}</text>
      </view>
    </view>
    <!--服务-->
    <view class="margin-top bg-white view-box service-view-box" @tap="serviceTap"  v-if="goodType==1">
      <view class="flex flex-wrap text-sm">
        <view class="basis-1">
          <text class="text-gray">服务</text>
        </view>
        <view class="basis-7">
          <view>
            <text class="tag-view" v-for="(item, index) in detail.param" :key="index">
              <text class="cuIcon-title text-red"/>
              <text>{{item.name}}</text>
            </text>
          </view>
        </view>
        <view class="basis-2">
          <view class="text-gray text-right icon-view">
            <text class="cuIcon-right icon"/>
          </view>
        </view>
      </view>
    </view>
    <!--参数-->
    <view class="margin-top bg-white view-box promotion-view-box" v-if="goodType==1">
      <view class="flex flex-wrap text-sm" @tap="promotionTap">
        <view class="basis-1">
          <text class="text-gray">参数</text>
        </view>
        <view class="basis-7" style="display: flex">
          <block  v-for="(item, index) in detail.cans" :key="index">
            <view >
              <text class="text-view">{{item.name}}</text>
            </view>
          </block>
        </view>
        <view class="basis-2">
          <view class="text-gray text-right icon-view">
            <text class="cuIcon-right icon"/>
          </view>
        </view>
      </view>
    </view>
    <!--选择-->
    <view class="margin-top bg-white view-box select-view-box">
      <view class="flex flex-wrap text-sm">
        <view class="basis-1">
          <text class="text-gray">发货</text>
        </view>
        <view class="basis-9">
          <text class="text-sm">{{detail.place_of}}，当日发货，顺丰包邮(部分地区除外)</text>
        </view>
      </view>

      <view class="border-view"/>

      <view class="flex flex-wrap text-sm" @tap="selectTap">
        <view class="basis-1">
          <text class="text-gray">已选</text>
        </view>
        <view class="basis-8">
          <text class="text-sm">{{boxArr.goods_sku_text}}</text>
        </view>
        <view class="basis-1">
          <view class="text-gray text-right">
            <text class="cuIcon-right icon"/>
          </view>
        </view>
      </view>
    </view>
    <!--杂项信息-->
    <view class="margin-top bg-white view-box goods-info-view-box">

      <view class="recommend-list-box">
        <view class="text-sm">官方推荐</view>
        <!--滑动列表-->
        <view class="recommend-scroll-box">
          <scroll-view class="recommend-scroll" scroll-x>
            <block v-for="(items,indexs) in activity_goods" :key="indexs">
              <view :id="['scroll' + (indexs + 1 )]" class="recommend-scroll-item" @click="clickDetail(items)">
                <view class="cu-avatar xl radius" :style="[{backgroundImage:'url('+imgUrl+ items.add_file +')'}]"/>
                <view class="text-cut-2 text-sm text-black margin-tb-sm">{{items.name}}</view>
                <view class="text-red text-price margin-tb-sm text-lg">{{items.day_price}}</view>
              </view>
            </block>
          </scroll-view>
        </view>
      </view>

    </view>
    <!-- 详情 -->
    <view class="Goods-details margin-top">

      <!-- tags -->
      <u-sticky offset-top="160">
        <view class="goods-tags">
          <u-tabs name="cate_name" :list="GoodsDetailsList" :is-scroll="false" active-color="#ff584f"
                  :current="GoodsDetailsCurrent" @change="change"></u-tabs>
        </view>
      </u-sticky>
      <!-- tabs 的 切换内容 -->
      <view class="tags-container">
        <!-- 商品详情 -->
        <view class="u-content" v-if="GoodsDetailsCurrent === 0">
          <!-- 租二手机卡片 -->
          <view class="secondhand_info" v-if="goodType==3">
            <view class="secondhand_title">
              <text style="display: flex;flex-direction: column;">
                <text>爱宝租机官方质检报告</text>
                <text style="font-size: 28rpx;color:#ffdddd; margin-top: 10rpx;">爱宝租机自营质检中心权威认证</text>
              </text>
              <image class="secondhand_title_img" :src="imageUrl+'qualityInspector.png'" ></image>
            </view>
            <view class="info_box">
              <view class="info_box_title">
                {{detail.name}}
              </view>
              <!-- 分割线 -->
              <view class="border-top-1-box">
                <view class="border-top-1">
                </view>
              </view>
              <view class="info_box_old">
                <view class="info_old_degree">
                  <text style="font-size:68rpx;color: #ff0900;">{{detail.is_new | filternIsold }}</text>
                  <text style="font-size:32rpx;color: #ff0900;margin: 0 0 8rpx 4rpx;">{{[4,5,6,7].some(item=>item===detail.is_new)?'新':'' }}</text>
                  <view style="margin: 0 0 6rpx 6rpx;" @click="showInstructions">
                    <u-icon size="18px" color="#333" name="question-circle" ></u-icon>
                  </view>
                </view>
                <view class="detection_result">
                  <text>检测结果: </text>
                  <text>{{detail.detection_result||'--'}}</text>
                </view>
              </view>
              <!-- 分割线 -->
              <view class="border-top-1-box">
                <view class="border-top-1">
                </view>
              </view>
              <view class="introduce_box">
                <view class="introduce_item">
                  <text>{{detail.battery ||'--'}}</text>
                  <text>电池效率</text>
                </view>
                <view class="introduce_item">
                  <text>{{detail.mainboard ||'--'}}</text>
                  <text>主板情况</text>
                </view>
                <view class="introduce_item">
                  <text>{{detail.battery_case ||'--'}}</text>
                  <text>电池健康</text>
                </view>
              </view>
              <!-- 分割线 -->
              <view class="border-top-1-box">
                <view class="border-top-1">
                </view>
              </view>
              <view class="introduce_box">
                <view class="introduce_item">
                  <text>{{detail.screen_case ||'--'}}</text>
                  <text>屏幕情况</text>
                </view>
                <view class="introduce_item">
                  <text>{{detail.cabinet_case ||'--'}}</text>
                  <text>外壳磕碰</text>
                </view>
                <view class="introduce_item">
                  <text>{{detail.is_protection ||'--'}}</text>
                  <text>是否过保</text>
                </view>
              </view>
              <!-- 分割线 -->
              <view class="border-top-1-box">
                <view class="border-top-1">
                </view>
              </view>
              <uni-collapse :accordion="true" >
                <uni-collapse-item :border="false" titleBorder="none" >
                  <template v-slot:title>
                    <view style="display: flex;justify-content: space-between;margin: 20rpx 0;">
                      <text style="font-size: 32rpx;">外观检测</text>
                      <text style="color:#ff0900">
                        <uni-icons type="checkbox" size="18" color="#ff0900"></uni-icons>
                        {{detail.aspectCount}}项全部通过
                      </text>
                    </view>
                  </template>
                  <view v-if="detail.aspect.length>0">
                    <view class="info_list" v-for="item in detail.aspect" :key="item.id">
                      <view class="info_title">
                        {{item.name}}
                      </view>
                      <view class="item_info" v-for="i in item.children" :key="i.id">
                        <view class="text_1">
                          {{i.name}}
                        </view>
                        <view class="line"></view>
                        <view class="text_2">
                          {{i.type}}
                        </view>
                      </view>
                    </view>
                  </view>
                  <view v-else>暂无数据</view>
                </uni-collapse-item>
                <uni-collapse-item :border="false" titleBorder="none" >
                  <template v-slot:title>
                    <view style="display: flex;justify-content: space-between;margin: 20rpx 0">
                      <text style="font-size: 32rpx;">功能检测</text>
                      <text style="color:#ff0900">
                        <uni-icons type="checkbox" size="18" color="#ff0900"></uni-icons>
                        {{detail.functionCount}}项全部通过
                      </text>
                    </view>
                  </template>
                  <view v-if="detail.function.length>0">
                    <view class="info_list" v-for="item in detail.function" :key="item.id">
                      <view class="info_title">
                        {{item.name}}
                      </view>
                      <view class="item_info" v-for="i in item.children" :key="i.id">
                        <view class="text_1">
                          {{i.name}}
                        </view>
                        <view class="line"></view>
                        <view class="text_2">
                          {{i.type}}
                        </view>
                      </view>
                    </view>
                  </view>
                  <view v-else>暂无数据</view>
                </uni-collapse-item>
              </uni-collapse>
            </view>
          </view>
          <!-- 质检流程-->
          <view class="secondhand_info" v-if="goodType==3">
            <view class="secondhand_title">
              <text>质检流程</text>
            </view>
            <view class="info_box">
              <image style="width: 100%;margin-bottom:30rpx; " src="https://mp.tjyouzu.com/static/mp-alipay/image/process.jpg"></image>
            </view>
          </view>

          <!-- 富文本 -->
          <u-parse :html="detail.remark" ></u-parse>
        </view>
        <!-- 租赁须知 -->
        <view class="u-content paddingText" v-if="GoodsDetailsCurrent === 1">
          <!-- 富文本 -->
          <u-parse :html="detail.notice" ></u-parse>
        </view>
        <!-- 常见问题 -->
        <view class="u-content paddingText" v-if="GoodsDetailsCurrent === 2">
          <!-- 富文本 -->
          <u-parse :html="detail.problem" ></u-parse>
        </view>
      </view>
    </view>
    <!-- 成色说明 底部弹出框 -->
    <u-popup mode="bottom" v-model="isShowInstructions" :z-index="999999999999">
      <view class="fineness_content">
        <view class="fineness_content_title">
          <text>成色说明</text>
          <text style="float: right;" @click="isShowInstructions = false;">
            <u-icon size="24px" color="#7c7c7c" name="close-circle" ></u-icon>
          </text>
        </view>
        <view class="fineness_box">
          <view class="fineness_item" v-for="item in finenessDescription" :key="item.type">
            <view class="fineness_left">
              <text class="fineness_left_title">{{item.title}}</text>
              <view class="fineness_left_subtitle" v-if="item.subtitle!==''">
                {{item.subtitle}}
              </view>
            </view>
            <view class="fineness_right">
              {{item.text}}
            </view>
          </view>
        </view>
        <view class="kong-bg" style="background-color: #0000;">

        </view>
        <!-- 			<view class="confrim-btn">
                <u-button type="primary" @click="isShowInstructions = false;">关闭</u-button>
              </view> -->
      </view>
    </u-popup>
    <!--占位底部距离-->
    <view class="cu-tabbar-height"/>
    <!--底部操作-->
    <view class="footer-fixed">

      <submit-bar @buy="selectTap"> </submit-bar>
    </view>
    <!--弹出框-->
    <view class="cu-modal bottom-modal bottom-modal-box" :class="bottomModal?'show':''">
      <view class="cu-dialog bg-white">
        <!--标题-->
        <view class="text-black text-center margin-tb text-lg title-bar">
          <text>{{modalTitle}}</text>
          <text class="cuIcon-close close-icon" @tap="hideModal"></text>
        </view>

        <!--内容区域-->
        <view class="modal-content">

          <!--服务区域-->
          <view class="view-box service" v-if="modalType=='service'">
            <block v-for="(item, index) in detail.param" :key="index">
              <view class="text-view">
                <text class="cuIcon-title text-red"/>
                <text class="text-cut text-black">{{item.name}}</text>
              </view>
              <view class="text-sm text-list-view">
                <view class="margin-left text-cut text-gray">{{item.remark}}</view>
              </view>
            </block>
          </view>

          <!--促销区域-->
          <view class="view-box promotion" v-if="modalType=='promotion'">
            <block v-for="(item, index) in detail.cans" :key="index">
              <view class="text-view">
                <text class="cuIcon-title text-red"/>
                <text class="text-cut text-black">{{item.name}}</text>
              </view>
              <view class="text-sm text-list-view">
                <view class="margin-left text-cut text-gray">{{item.remark}}</view>
              </view>
            </block>
          </view>

        </view>
      </view>
    </view>

    <!--规格选择-->
    <view class="cu-modal bottom-modal bottom-modal-box" :class="skuModal?'show':''">
      <view class="cu-dialog bg-white">
        <!--标题-->
        <view class="text-black text-center margin-tb text-lg title-bar">
          <text>选择规格</text>
          <text class="cuIcon-close close-icon" @tap="skuModal = false;"></text>
        </view>

        <!--内容区域-->
        <view class="modal-content">
          <!--选择规格-->
          <view class="view-box select" >
            <!--商品信息-->
            <view class="cu-list menu-avatar">
              <view class="cu-item">
                <view class="cu-avatar radius lg" :style="'background-image:url('+imgUrl + detail.add_file+')'"/>
                <view class="content">
                  <view class="text-price-view">
                    <text class="text-price text-red margin-right-xs">{{boxArr.day_price}}/天</text>
                  </view>
                  <view class="text-black text-sm flex">
                    <view class="text-cut">已选: {{boxArr.goods_sku_text}}</view>
                  </view>
                </view>
              </view>
              <!-- rent -->
              <view class="rent">
                <view class="rent-item">
                  <text>月租金</text>
                  <text>￥{{boxArr.mon_price}}</text>
                </view>
                <view class="rent-item">
                  <text>总租金</text>
                  <text>￥{{boxArr.sum_price}}</text>
                </view>
                <view class="rent-item">
                  <text>到期买断金</text>
                  <text>￥{{boxArr.expire_price}}</text>
                </view>
              </view>
            </view>

            <!--规格数据-->
            <view class="select-btn-list-boox">
              <view class="select-item" v-for="(item, index) in detail.skuList" :key="item.id">
                <view class="text-black">{{item.name}}</view>
                <view class="select-btn">
                  <block v-for="(v, i) in item.second" :key="i">
                    <button class="cu-btn" :class="[subIndex[index] == i?'light bg-red':'']" :key="v.id" :data-show="v.isShow" :data-ol="subIndex[index]" :data-name="v.name" :data-index="i" :data-n="index" @tap="specificationBtn">{{v.name}}</button>
                  </block>
                </view>
              </view>

              <view class="select-item">
                <view class="text-black">租用天数</view>
                <view class="select-btn">
                  <button class="cu-btn light bg-red">{{boxArr.by_stages?boxArr.by_stages * 30 + '天': ''}}</button>
                </view>
              </view>

            </view>

          </view>

          <!--公共按钮-->
          <view class="footer-fixed">
            <view class="flex flex-direction">
              <button class="cu-btn bg-red lg" @click="skuPriceHandle">确定</button>
            </view>
          </view>

        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import { mapState } from 'vuex'
  import {getDetail, getGoods} from "../../common/http";
  import barTitle from "../../components/common/bar-title";
  import submitBar from "../../components/common/submitBar";
	export default {
    components: {
      barTitle,
      submitBar
    },
		data() {
			return {
        goodsId: 0,
        goodType: 0,
        detail: {},
        bannerCur: 0,
        modalTitle: '',
        modalType: 'promotion',
        bottomModal: false,
        activity_goods: [],
        GoodsDetailsList: [{
          cate_name: '商品详情'
        }, {
          cate_name: '租赁须知'
        }, {
          cate_name: '常见问题',
        }],
        GoodsDetailsCurrent: 0,
        skuModal: false,
        selectArr: [], //存放被选中的值

        shopItemInfo: {}, //存放要和选中的值进行匹配的数据

        subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断

        specifications:'',

        boxArr: {},
        //成色说明弹窗
        isShowInstructions:false,
        finenessDescription:[
          {type:1,title:'全新',subtitle:'',text:'全新未拆封未激活，原厂包装及配件，官方质保。'},
          {type:2,title:'准新机',subtitle:'媲美新机',text:'100%原厂配件，外观完美、无使用痕迹，充电次数极低，功能完好，外观完美，电池效率大多为100%。'},
          {type:3,title:'99新',subtitle:'完美充新',text:'机身或屏幕有细微划痕，或外壳有极其细微划痕,功能完好，电池效率85%以上。'},
          {type:4,title:'95新',subtitle:'自用推荐',text:'功能正常，轻微使用痕迹，屏幕或机身有轻微划痕/瑕疵，电池效率80%以上。'},
          {type:5,title:'90新',subtitle:'性价比之选',text:'功能正常，轻度使用痕迹，屏幕或机身上有少量划痕/磨损，带壳膜后基本不可见，电池效率80%以上。'},
          {type:6,title:'80新',subtitle:'实惠自用',text:'功能完好，使用痕迹可见，屏幕或机身有明显划痕、磕碰或掉漆。'},
        ],
			};
		},
		onLoad(option) {
      let options = my.getLaunchOptionsSync();
      if(options.query){
        this.goodsId = options.query.id
        this.goodType = options.query.type
      }else{
        this.goodsId = option.id
        this.goodType = option.type
      }
      if(!this.goodsId || !this.goodType){
        // 如果没有 id 跳回首页
        uni.redirectTo({
          url: '/pages/index/index'
        });
      }

			this.init()
		},
    watch:{
      'detail.skuPriceList':{
        handler(newValue){
          var self = this

          var simulatedDATA = self.detail

          var difference = simulatedDATA.skuPriceList // 价格

          var shopItemInfo = self.shopItemInfo

          var specifications = simulatedDATA.skuList // 规格

          for (var i in difference) {

            shopItemInfo[difference[i].goods_sku_text] =

                difference[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配

          }

          for (var i = 0; i < specifications.length; i++) {

            for (var o = 0; o < specifications[i].second.length; o++) {

              specifications[i].second[o].isShow = true

            }

          }

          simulatedDATA.skuList = specifications

          this.detail = simulatedDATA;
          console.log(this.detail)
          self.shopItemInfo = shopItemInfo,

          self.specifications = specifications

          // 默认选中 所有规格中的第一个 如果第一个库存小于 1 选中以一个
          let arr1 = self.detail.skuPriceList
          for (var i = 0; i < arr1.length; i++) {
            if(arr1[i].stock > 1){
              let strArr = arr1[i].goods_sku_text.split(',')
              // skuListActive
              this.boxArr = arr1[i]
              this.skuListActive(strArr)
              return;
            }

          }

        }
      }
    },
		computed:{
			...mapState(['imgUrl', 'imageUrl']),
			/* 过滤出的最低价格 */
			comPrice(){
				if(this.detail.skuPriceList && this.detail.skuPriceList.length > 0){
					return this.detail.skuPriceList[0].day_price
				}else{
					return 0
				}
			}
		},

		methods: {
      showInstructions(){
        this.isShowInstructions = true
      },
      skuPriceHandle(){
        if(uni.getStorageSync('userId') == ''){
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          });
        return
        }
        const userInfo = uni.getStorageSync('userInfo');
        if(userInfo.type != 1){
          uni.showToast({
            title: '请先完成实名认证',
            icon: 'none',
            success: function () {
                uni.navigateTo({
                  url: "/sub_pages/my/personal-data"
                });
            }
          });
          return
        }
        let that = this;
        let detail = {
          goods: that.detail,
          sku: that.boxArr
        }
        uni.showLoading({
          title: '加载中'
        });
        uni.setStorage({
          key: 'goods',
          data: detail,
          success: function () {
            uni.hideLoading();
            uni.navigateTo({
              url: '/sub_pages/order/settlement?detailId='+ that.goodsId
            });
          }
        })
      },
      clickDetail(item){
        uni.navigateTo({
          url: '/sub_pages/detail/detail?id='+item.id + '&type='+item.type
        });
      },
      /* sku 选择事件 */
      specificationBtn(e){
        var n = e.currentTarget.dataset.n

        var index = e.currentTarget.dataset.index

        var item = e.currentTarget.dataset.name

        var self = this;

        var selectArr = self.selectArr

        var subIndex = self.subIndex

        var boxArr = self.boxArr

        var shopItemInfo = self.shopItemInfo

        if (selectArr[n] != item) {

          selectArr[n] = item;

          subIndex[n] = index;

        } else {

          // self.selectArr[n] = "";

          // self.subIndex[n] = -1; //去掉选中的颜色

        }

        self.checkItem();
        var arr = this.shopItemInfo[selectArr];
        if(arr){
          boxArr = arr
        }

        //	console.log(boxArr)

        this.selectArr = selectArr
        this.subIndex = subIndex
        this.boxArr = boxArr
        this.shopItemInfo = shopItemInfo

        // console.log(boxArr) //选中的

      },
      checkItem() {

        var self = this;

        var simulatedDATA=self.detail

        var option = self.detail.skuList; // 规格

        var result = []; //定义数组存储被选中的值

        for (var i in option) {

          result[i] = self.selectArr[i] ? self.selectArr[i] : "";

        }

        for (var i in option) { // 规格二级

          var last = result[i]; //把选中的值存放到字符串last去

          for (var k in option[i].second) {

            result[i] = option[i].second[k].name; //赋值，存在直接覆盖，不存在往里面添加name值

            option[i].second[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择

          }

          result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖

        }

        simulatedDATA.skuList = option
        this.detail = simulatedDATA;


      },
      isMay(result) {

        for (var i in result) {

          if (result[i] == "") {

            return true; //如果数组里有为空的值，那直接返回true

          }

        }

        return !this.shopItemInfo[result] ?

            false :

            this.shopItemInfo[result].stock !== 0; //匹配选中的数据的库存，若不为空返回true反之返回false

      },
      skuListActive(arr){
        let  skuList = this.detail.skuList;
        for (var i = 0; i < skuList.length; i++) {

          for (var k = 0; k < skuList[i].second.length; k++) {
            let arr2 = skuList[i].second[k]
            if(arr2.name == arr[i]){
              this.selectArr.push(arr2.name)
              this.subIndex.push(k)
            }
          }
        }
      },
      selectTap(){
        this.skuModal = true;
      },
      bannerSwiper(e) {
        this.bannerCur = e.detail.current;
      },
			init(){
        // 获取商品详情
        this.getGoodsDetails();
        this.recommended();
      },
      recommended(){
        getGoods({
          type: 3,
          page: 0,
          pageSize: 10
        }).then((res)=>{
          this.activity_goods = res.data.data.goodsList
        });

      },
      getGoodsDetails(){
        getDetail({id:this.goodsId}).then((res)=>{
          if(res.data.code == 0){
            this.detail = res.data.data;
          }
        })
      },
      serviceTap() {
        this.modalTitle = "服务";
        this.modalType = 'service';
        this.showModal();
      },
      showModal() {
        this.bottomModal = true;
      },
      hideModal(e) {
        this.bottomModal = false;
        this.modalTitle = "";
        this.modalType = '';
      },
      promotionTap() {
        this.modalTitle = "促销优惠";
        this.modalType = 'promotion';
        this.showModal();
      },
      change(index) {
        this.GoodsDetailsCurrent = index;
      },
		},

		/* 过滤器 */
		filters:{

			// 过滤是否全新
			filterold(value){
				if(value == 1){
					return '全新'
				}else if(value == 2){
					return '非全新'
				}else if(value == 3){
					return '准新机'
				}else if(value == 4){
					return '99新'
				}else if(value == 5){
					return '95新'
				}else if(value == 6){
					return '90新'
				}else if(value == 7){
					return '80新'
				}else {
					return '非全新'
				}
			},
      // 过滤是否全新
      filternIsold(value){
        if(value == 1){
          return '全新'
        }else if(value == 2){
          return '非全新'
        }else if(value == 3){
          return '准新机'
        }else if(value == 4){
          return '99'
        }else if(value == 5){
          return '95'
        }else if(value == 6){
          return '90'
        }else if(value == 7){
          return '80'
        }else {
          return '非全新'
        }
      }
		}
	}
</script>
<style lang="scss" scoped>
.rent{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 10px 20px 10px;

  .rent-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.5;
    text{
      &:last-child{
        color: #DD524D;
      }
    }
  }
}
.banner-swiper-box {
  position: relative;
  width: 100%;
  .screen-swiper {
    min-height: 436.36rpx;
  }
  .page {
    position: absolute;
    bottom: 27.27rpx;
    right: 27.27rpx;
    padding: 18.18rpx;
  }
}

.limited-seckill-box {
  position: relative;
  background-image: url('/static/images/home/sundry/aiu.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 18.18rpx 27.27rpx;
  color: #ffffff;
  width: 100%;
  .text-xxl {
    font-size: 54.54rpx;
  }
  .cost-price-num {
    position: absolute;
    font-weight: 200;
    left: 199.99rpx;
    top: 21.81rpx;
  }
  .cost-price-num.price-6{
    left: 254.54rpx;
  }
  .cost-price-num.price-5 {
    left: 227.27rpx;
  }
  .cost-price-num.price-4 {
    left: 199.99rpx;
  }
  .cost-price-num.price-3 {
    left: 163.63rpx;
  }
  .cost-price-num.price-2{
    left: 136.36rpx;
  }
  .cost-price-num.price-1{
    left: 99.99rpx;
  }
  .time-right {
    position: absolute;
    right: 27.27rpx;
    top: 16.36rpx;
  }
}
.view-box {
  position: relative;
  padding: 18.18rpx 27.27rpx;
}
.title-view-box {
  position: relative;
  .cu-tag {
    margin-top: -9.09rpx;
    margin-right: 9.09rpx;
  }
  .title-tip-box {
    position: relative;
    padding: 9.09rpx 18.18rpx;
    width: 100%;
    .text-cut {
      padding-right: 27.27rpx;
    }
    .icon {
      position: absolute;
      right: 18.18rpx;
      top: 16.36rpx;
    }
  }
}
.service-view-box {
  position: relative;
  .flex {
    .basis-1 {
      flex-basis: 10%;
    }
    .basis-7 {
      flex-basis: 70%;
    }
    .basis-2 {
      flex-basis: 20%;
    }
  }
  .tag-view {
    margin-right: 9.09rpx;
  }
  .icon-view {
    height: 100%;
    display: flex;
    align-items: center;
    .icon {
      position: absolute;
      right: 15px;
    }
  }
}

.promotion-view-box {
  .flex {
    .basis-1 {
      flex-basis: 10%;
    }
    .basis-7 {
      flex-basis: 70%;
    }
    .basis-2 {
      flex-basis: 20%;
    }
  }
  .text-view {
    margin-left: 9.09rpx;
  }
  .icon-view {
    height: 100%;
    display: flex;
    align-items: center;
    .icon {
      position: absolute;
      right: 15px;
    }
  }
}

.select-view-box {
  .flex {
    .basis-1 {
      flex-basis: 10%;
    }
    .basis-9 {
      flex-basis: 90%;
    }
    .basis-8 {
      flex-basis: 80%;
    }
  }
  .border-view {
    position: relative;
    background: #efebeb;
    margin: 21.81rpx 0;
    height: 2rpx;
    width: 100%;
  }
  .icon {
    position: relative;
    top: 3.63rpx;
  }
}

.comment-view-box {
  .border-view {
    position: relative;
    background: #efebeb;
    margin: 0 27.27rpx;
    height: 2rpx;
  }
  .view-box {
    .flex {
      .basis-1 {
        flex-basis: 10%;
      }
      .basis-9 {
        flex-basis: 90%;
      }
    }
  }
}

.goods-info-view-box {
  .shop-view {
    position: relative;
    width: 100%;
    .cu-avatar {
      position: absolute;
      height: 80rpx;
      width: 80rpx;
    }
    .text-view {
      padding-left: 99.99rpx;
      padding-right: 145.45rpx;
    }
    .cu-btn {
      position: absolute;
      top: 21.81rpx;
      right: 0;
    }
  }
  .border-view {
    position: relative;
    background: #efebeb;
    margin: 21.81rpx 0;
    height: 2rpx;
    width: 100%;
  }
  .live-tag-view {
    position: relative;
    width: 100%;
    .text-view {
      padding-right: 127.27rpx;
      .cu-tag {
        position: relative;
        top: -3.63rpx;
      }
    }
    .text-right-view {
      position: absolute;
      right: 0;
      top: 3.63rpx;
    }
  }
  .recommend-list-box {
    .recommend-scroll-box {
      position: relative;
      width: 100%;
      .recommend-scroll {
        position: relative;
        height: 363.63rpx;
        white-space: nowrap;
        width: 100%;
        .recommend-scroll-item {
          display: inline-block;
          padding-top: 27.27rpx;
          width: 199.99rpx;
          padding-right: 18.18rpx;
          white-space: initial;
          .cu-avatar{
            width: 181.81rpx;
            height: 181.81rpx;
          }
        }
      }
    }
  }
}

.goods-details-box {
  position: relative;
  width: 100%;
  image {
    width: 100%;
  }
}

.goods-help-view-box {
  .flex {
    .basis-1 {
      flex-basis: 10%;
    }
    .basis-9 {
      flex-basis: 90%;
    }
  }
  .border-view {
    position: relative;
    background: #efebeb;
    margin: 21.81rpx 0;
    height: 2rpx;
    width: 100%;
  }
}

.recommend-list-view-box {
  padding: 18.18rpx 0;
  .flex {
    .img-aau {
      width: 81.81rpx;
      margin-top: 12.72rpx;
    }
    .text-right {
      .img-aau {
        margin-right: 14.54rpx;
      }
    }
    .text-left {
      .img-aau {
        margin-left: 14.54rpx;
      }
    }
  }
  .goods-list-box {
    position: relative;
    width: 100%;
    margin: 27.27rpx 0;
    .col-2 {
      margin: 0 18.18rpx;
      .list-itme {
        padding: 9.09rpx;
        .list-radius {
          border-radius: 18.18rpx;
          .goods-img {
            position: relative;
            width: 100%;
            .cu-avatar {
              width: 340rpx;
              height: 340rpx;
              border-radius: 18.18rpx 18.18rpx 0 0;
            }
            .mold-view {
              position: absolute;
              bottom: 0;
            }
          }
          .view-goods-info {
            position: relative;
            padding: 18.18rpx;
            .text-lg {
              font-size: 36.36rpx;
            }
          }
        }
      }
    }
  }
}

.footer-fixed {
  .cu-bar.tabbar.shop .action {
    color: #333333;
  }
}

.bottom-modal-box {
  .title-bar {
    position: relative;
    width: 100%;
    .close-icon {
      position: absolute;
      right: 36.36rpx;
    }
  }
  .modal-content {
    position: relative;
    width: 100%;
    overflow-y: auto;
    //height: calc(100vh - 300.54rpx);
    padding: 0 29.09rpx 29.09rpx;
    margin-bottom: 118.18rpx;
    .view-box {
      position: relative;
      width: 100%;
      padding: 0;
      text-align: left;
    }
    .view-box.service {
      .text-view {
        margin-bottom: 18.18rpx;
      }
      .text-list-view {
        position: relative;
        width: 100%;
        margin-bottom: 18.18rpx;
        .text-cut {
          padding-right: 21rpx;
        }
      }
      .text-list-view + .text-view {
        margin-top: 36.36rpx;
      }
    }
    .view-box.promotion {
      .text-view {
        margin-bottom: 18.18rpx;
        .cu-tag {
          position: relative;
          top: -3.63rpx;
        }
      }
      .text-list-view {
        position: relative;
        width: 100%;
        margin-bottom: 18.18rpx;
        .text-cut {
          padding-right: 218.18rpx;
        }
        .text-right-view {
          position: absolute;
          right: 0;
          top: 2rpx;
        }
      }
      .text-list-view + .text-view {
        margin-top: 36.36rpx;
      }
    }
    .view-box.select {
      .cu-list.menu-avatar>.cu-item {
        .content {
          width: calc(100% - 94.54rpx - 59.99rpx);
        }
      }
      .select-btn-list-boox {
        .select-item {
          padding: 18.18rpx 0;
          border-bottom: 2rpx solid #f3f3f3;
          .select-btn {
            position: relative;
            margin-top: 14.54rpx;
            width: 100%;
            .cu-btn {
              font-size: 23.63rpx;
              margin: 5rpx 16.36rpx 5rpx 0;
            }
            .cu-btn.light {
              border: 2rpx solid;
            }
            .cu-btn[disabled] {
              color: #aaaaaa;
            }
          }
        }
      }
    }
    .footer-fixed {
      padding: 9.09rpx 29.09rpx 29.09rpx;
    }
  }
}
.bottom-modal-box.cu-modal.bottom-modal {
  .cu-dialog {
    border-radius: 36.36rpx 36.36rpx 0 0;
  }
}
.secondhand_info{
  margin: 20rpx;
  border-radius: 10rpx;
}
.secondhand_title{
  background: linear-gradient(#FF584F 50%,#FF7854);
  border-radius: 20rpx;
  color: #fff;
  font-size: 40rpx;
  padding: 40rpx 20rpx 70rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.secondhand_title_img{
  width: 100rpx;
  height: 100rpx;
}
.info_box{
  padding:14rpx 20rpx 20rpx 20rpx;
  background: #fff;
  border: 3.2rpx solid #FF584F;
  border-top:none;
  border-radius: 10px;
  position: relative;
  &::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 50rpx;
    border-radius: 20rpx 20rpx 0 0;
    border: 3.2rpx solid #FF584F;
    border-bottom: none;
    top: -34rpx;
    left: -3.2rpx;
    background: #fff;
  }
}
.info_box_title{
  font-size:30rpx;
  margin-bottom: 20rpx;
  line-height: 2;
}
.info_box_old{
  margin:20rpx 0;
}
.info_old_degree{
  margin-bottom: 20rpx;
  display: flex;
  align-items: flex-end;
}
.introduce_box{
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0;
}
.introduce_item{
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text{
    width: 100%;
    &:first-child{
      color:#000;
      font-size: 16px;
      margin-bottom: 10rpx;
    }
  }
}

/* 分割线 */
.border-top-1-box {
  padding: 0 20rpx;

  .border-top-1 {
    height: 1px;
    background-color: rgb(240, 240, 240);
  }
}
.item_info{
  display: flex;
  align-items: center;
  justify-content: stretch;
  margin-top: 20rpx;
}
.text_1,
.text_2{
  background: #fff;
  padding: 0 20rpx 0 16rpx;
  display: flex;
  white-space: nowrap;
}
.line {
  height: 1px;
  margin: 0 10px ;
  background: linear-gradient(
          to left,
          transparent 0%,
          transparent 50%,
          #ccc 50%,
          #ccc 100%
  );
  background-size: 10px 1px;
  background-repeat: repeat-x;
  width: 100%;
}
.kong-bg{
  height: 10px;
  margin: 0 -20rpx;
  background-color: rgb(240, 240, 240);
}
.fineness_content{
  background-color: #E8E8ED;
  padding: 20rpx;
}
.fineness_content_title{
  font-size: 42rpx;
  color: #3b3c48;
  text-align: center;
  font-weight: 700;
  margin: 16rpx 0 28rpx 0;
}
.fineness_box{
  background: linear-gradient(#fff 90%,#0000) ;
  border-radius: 20rpx;
  padding: 20rpx;
}
.fineness_left_title{
  font-size: 32rpx;
  color: #000;
  margin: 0 0 8rpx 0;
}
.fineness_left_subtitle{
  background: #3b3c48;
  color: #fff;
  font-size: 22rpx;
  border-radius: 10rpx;
  padding: 7rpx 20rpx;
}

.fineness_item{
  display: flex;
  justify-content: space-between;
  .fineness_left{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10rpx;
    width: 34%;
    box-sizing: border-box;
  }

  .fineness_right{
    padding: 40rpx 10rpx;
    border-bottom: 1px solid #dedede;
    width: 66%;
    font-size: 24rpx;
    color: #666;
    box-sizing: border-box;
  }
  &:last-child{
    .fineness_right{
      border-bottom: none;
    }
  }
}
</style>

